const legend1 = 'image:///asset/get/s/data-1616488906907-TTcSsT2dL.png';
const legend2 = 'image:///asset/get/s/data-1616488914803-Pen9H3XeG.png';
const legend3 = 'image:///asset/get/s/data-1616488899626-PSUAyWzyA.png';
import main from './img/3.svg';
import person from './img/2.svg';
import company from './img/1.svg';

const symbol1 = 'image://' + person;
const symbol2 = 'image://' + company;
const symbol3 = 'image://' + main;

// tooltip
// const tooltip = {
//     trigger: 'item',
//     textStyle: { fontSize: '100%'},
//     // backgroundColor: 'none',
//     formatter: params => {
//         if(params.dataType === "edge") {
//             return `
//                 <div>接触： 2021-01-24</div>
//             `
//         }

//         switch (params.value.type) {
//             case 0:
//                 return `
//                     <div>
//                         <div>检测阳性：2021-02-17</div>
//                         <div>出院：2021-03-03</div>
//                     </div>
//                 `
//                 break;
//             case 1:
//                 return `
//                     <div>
//                         <div>发病：2021-01-31</div>
//                         <div>确诊：2021-01-31</div>
//                         <div>出院：2021-01-31</div>
//                     </div>
//                 `
//                 break;
//             default:
//                 break;
//         }
//     }
// }

const graphData = {
  data: [
    {
      symbol: '企业',
      name: '中*启*科*有*公*',
      category: '企业',
      symbolSize: 53,
      value: 10,

      position: '中心',
    },
    {
      symbol: '个人',
      name: '**辉',
      category: '个人',
      symbolSize: 53,
      value: 10,
      position: '旁边',
    },
    {
      symbol: '企业',
      category: '企业',
      name: '中*天*科*有*公*',
      symbolSize: 53,
      value: 10,
      position: '旁边',
    },
    {
      symbol: '企业',
      category: '企业',
      name: '中*邦*科*有*公*',
      symbolSize: 53,
      value: 10,
      position: '旁边',
    },
  ],
  graphLinks: [
    {
      symbol1: '企业',
      source: '中*启*科*有*公*',
      value: '实控人',
      target: '**辉',
    },
    {
      symbol1: '个人',
      source: '**辉',
      value: '对外担保',
      target: '中*邦*科*有*公*',
    },
    {
      symbol1: '企业',
      source: '中*邦*科*有*公*',
      value: '配偶',
      target: '中*天*科*有*公*',
    },
  ],
};

const color = ['#28CDBC', '#FF7B7B', '#4A8CFF'];

graphData.graphLinks.forEach((link) => {
  link.label = {
    align: 'center',
    fontSize: 12,
  };

  if (link.value.indexOf('担保') > -1) {
    link.lineStyle = {
      color: color[0],
    };
  } else if (link.value === '') {
    link.lineStyle = {
      color: color[1],
    };
  } else {
    link.lineStyle = {
      color: color[2],
    };
  }
});

const legend = {
  show: true,
  bottom: '5%',
  right: '2%',
  textStyle: { color: '#fff' },
  itemWidth: 20,
  itemHeight: 20,
  orient: 'vertical',
  data: [
    { name: '未感染', icon: legend1 },
    { name: '无症状感染', icon: legend2 },
    { name: '确诊病例', icon: legend3 },
  ],
};
const series = {
  type: 'graph',
  // layout: 'none', // 图的布局
  // symbol: symbol1, // 默认是「未感染」
  // symbolSize: 90,
  layout: 'force',
  symbolSize: 50,
  roam: 'scale',
  edgeSymbol: ['none', 'arrow'],
  zoom: 1,
  edgeSymbolSize: 20,
  edgeLabel: { show: true, textStyle: { fontSize: 10 }, formatter: '{c}' },
  // focusNodeAdjacency: true,
  // roam: true,
  force: {
    repulsion: 300,
    edgeLength: 50,
    layoutAnimation: false,
  },
  // animationDurationUpdate: 1500,
  // animationEasingUpdate: 'quinticInOut',
  categories: [{ name: '个人' }, { name: '企业' }],
  label: {
    show: true,
    align: 'center',
    textStyle: { fontSize: 12, color: '#fff' },
    formatter: (params) => {
      return `{${params.name}}`;
    },
    rich: {
      a0: {
        color: '#fff',
        padding: [4, 5],
        backgroundColor: 'rgba(255, 86, 76, .45)',
      },
      a1: {
        color: '#fff',
        padding: [4, 5],
        // backgroundColor: 'rgba(255, 86, 76, .35)'
      },
      a2: {
        color: '#fff',
        padding: [4, 5],
        // backgroundColor: 'rgba(239, 255, 55, .35)'
      },
      a3: {
        color: '#fff',
        padding: [4, 5],
        // backgroundColor: 'rgba(50, 233, 255, .35)'
      },
    },
  },
  data: graphData.data,
  links: graphData.graphLinks,
  lineStyle: {
    opacity: 0.9,
    width: 1,
    curveness: 0,
    color: '#fff',
  },
};

// const graphOption = { series, animationDuration: 1000,
//   animationEasingUpdate: 'quinticInOut',legend, backgroundColor: '#000' };

const graphOption = {
  animationDuration: 1000,
  animationEasingUpdate: 'quinticInOut',
  series: [
    {
      name: '',
      type: 'graph',
      layout: 'force',
      edgeSymbol: ['none', 'arrow'],
      draggable: false,
      zoom: 1,
      itemStyle: {
        normal: {
          borderWidth: 2,
        },
      },
      force: {
        repulsion: 300,
        edgeLength: 140, // 节点之间的距离
        layoutAnimation: false,
      },
      data: graphData.data,
      links: graphData.graphLinks,

      categories: [{ name: '个人' }, { name: '企业' }],
      focusNodeAdjacency: true,
      roam: true,
      edgeLabel: {
        normal: {
          show: true,
          formatter: function (x) {
            return x.data.name;
          },
        },
      },
      label: {
        normal: {
          show: true,
          position: 'inside',
          color: '#fff',
          textBorderWidth: 1,
        },
      },
      lineStyle: {
        normal: {
          color: 'source',
          curveness: 0,
          type: 'solid',
        },
      },
    },
  ],
};

export { graphOption };
